<!DOCTYPE html>
<html>
<head>
<#include "/common/common.ftl" parse=true encoding="utf-8">
<style>
body {
	background-color: #F3F3F3;
}

.tab-pane {
	padding-top: 20px;
	background-color: #fff;
	padding-left: 20px;
}

.nav a {
	color: #b7b9bd;
}

.nav:hover a {
	color: #CCC;
}

.nav span {
	margin-right: 20px;
	font-size: 10px;
	color: #999;
	float: right;
}


hr {
	margin-top: 8px;
}

.form-control1 {
	display: block;
	height: 34px;
	padding: 6px 12px;
	font-size: 14px;
	line-height: 1.42857143;
	color: #555;
	background-color: #fff;
	background-image: none;
	border: 1px solid #ccc;
	border-radius: 4px;
	-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
	box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
	-webkit-transition: border-color ease-in-out .15s, -webkit-box-shadow
		ease-in-out .15s;
	-o-transition: border-color ease-in-out .15s, box-shadow ease-in-out
		.15s;
	transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
	-o-transition: border-color ease-in-out .15s, box-shadow ease-in-out
		.15s;
}

.setSecurity {
	margin-top: 50px;
	margin-bottom: 50px;
}

.submit {
	margin-top: 10px;
	margin-left: 64px;
}

.securityExplain {
	margin-bottom: 40px;
}

#setSecurity1 {
	font-size: 18px;
}

#setSecurity3 {
	font-size: 18px;
	margin-right: 10px;
	margin-left: 10px;
}
</style>
</head>
<body>
<#include "/common/header.ftl" parse=true encoding="utf-8">
	<div class="container body_content">
		<div class="row">
			<div class="col-md-2" id="set"><#include
				"/personal/account/sidebar.ftl" parse=true encoding="utf-8"></div>
			<div class="col-md-10">
				<div class="col-md-offset-1 col-md-11 tab-pane form-horizontal"
					id="setForm" style="margin-bottom: 40px;">
					<div class="nav" id="setSecurity">
						<a class="active text-right" id="setSecurity1"
							href="#modifyEmailForm">修改电子邮箱</a> <a id="setSecurity3"
							href="#Security" style="display: none;">修改密保</a> <span>最后登录IP：${entity.lastestLoginIp!}</span>
						&nbsp;&nbsp; <span>最后登录时间：${entity.lastestLoginTime!}</span>
						&nbsp;&nbsp; <span>总登录次数：${entity.totalLoginNum!}</span>
						<hr>
					</div>
					<div id="myTabContent1" class="tab-content">
						<form class="tab-pane active form-horizontal"
							id="modifyEmailForm">
							<div class="form-group setSecurity">
								<label class="col-sm-2 control-label">原邮箱地址</label>
								<div class="col-sm-4">
									<input class="form-control" type="text" disabled="disabled" size="30" value="${entity.email!}" />
								</div>
							</div>
							<div class="form-group setSecurity">
								<label class="col-sm-2 control-label">新邮箱地址</label>
								<div class="col-sm-4">
									<input class="form-control" type="text" size="30" id="email" name="email" />
								</div>
								<div class="col-sm-3">
									<input type="submit" id="btn" value="免费获取验证邮件"
										onclick="settime(this)" class="btn btn-info" />
								</div>
							</div>
							<div class="form-group setSecurity">
								<label class="col-sm-2 control-label">验证码</label>
								<div class="col-sm-4">
									<input class="form-control" type="text" size="30" id="identifyCode" name="identifyCode" />
								</div>
							</div>
							<div class="form-group">
								<div class=" col-sm-offset-9 col-sm-2 center">
									<button type="submit" class="btn btn-primary">修改</button>
								<button type="reset" class="btn btn-primary" onclick="returnAccountSetting();">取消</button>
								</div>
							</div>
						</form>
					</div>
				</div>
			</div>
		</div>
	</div>

	<#include "/common/footer.ftl" parse=true encoding="utf-8">
	<script src="${base}/scripts/js/md5.min.js"></script>
	<script type="text/javascript">
	
	function getCode(){
		var url = '${base}/member/account/getEmailIdentifyCodeAction.json';
		var entity = {
				email : $("#email").val()
		};
		var onloadFunc = function(result) {
			if (result.isSuccess === true) {
				isGet = true;
			} else {
				bootbox.setLocale("zh_CN");
				bootbox.alert(result.message);
			}
		}
		httpRequestPostJson(url, entity, false, onloadFunc); 
	}

	//验证码按钮倒计时
	var countdown=60;
	var isGetCode = true;
	function settime(obj) { 
		if(isGetCode){
			getCode();
			isGetCode = false;
		}
		
	    if (countdown == 0) { 
	        obj.removeAttribute("disabled");    
	        obj.value="免费获取验证码"; 
	        countdown = 60; 
	        isGetCode = true;
	        return;
	    } else { 
	        obj.setAttribute("disabled", true); 
	        obj.value="重新发送(" + countdown + ")"; 
	        countdown--; 
	    } 
	 setTimeout(function() {settime(obj) } ,1000)  
	}

	//表单提交验证
	$(function() {
		$('#modifyEmailForm').bootstrapValidator({
			message : '该项不能为空',
			live : 'enabled',
			feedbackIcons : {
				valid : 'glyphicon glyphicon-ok',
				invalid : 'glyphicon glyphicon-remove',
				validating : 'glyphicon glyphicon-refresh'
			},
			submitHandler : function(validator, form, submitButton) {
				if($("#identifyCode").val() ==getIdentifyCodeFromSession()){
					var url = '${base}/member/account/modifyEmailAction.json';
					var entity = {
							email : $("#email").val()
					};
					var onloadFunc = function(result) {
						if (result.isSuccess === true) {
							alert("修改成功！");
							window.location = "${base}/member/account/baseInfo.do";
						} else {
							alert(result.message);
						}
					}
					httpRequestPostJson(url, entity, false, onloadFunc);
				} else {
					alert("验证码错误！");
					return;
				}
			},
			fields : {
				email : {
					message : '新邮箱地址无效',
					validators : {
						notEmpty : {
							message : '新邮箱地址不能为空'
						},
	                    emailAddress: {
	                        message: '该邮箱地址无效'
	                    }
					}
				},
				identifyCode : {
					validators : {
						notEmpty : {
							message : '验证码不能为空'
						}
					}
				}
			}
		});
	});
	
	
	/***********获取Session的验证码*********/
	function getIdentifyCodeFromSession() {
		var code;
		var url = '${base}/auth/getIdentifyCodeFromSession.json';
		var entity = {};
		var onloadFunc = function(result) {
			if (result.isSuccess === true) {				
				code= result.data;
			} else {
				bootbox.setLocale("zh_CN");
				bootbox.alert(result.message);
			}
		}
		httpRequestPostJson(url, entity, false, onloadFunc); 
		return code;
	};

	function returnAccountSetting(){
		window.location =  "${base}/member/account/baseInfo.do";
	}
	
		$(function() {
			$('#setSecurity a[href="#modifyEmailForm"]').tab('show')
			$('#setSecurity a').click(function(e) {
				var $li = $('#setSecurity a');
				e.preventDefault();
				$li.removeClass();
				$(this).addClass('text-right');
				$(this).tab('show');
			})
		})

	</script>
</body>